<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Top 10 Click Sessions</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container mt-5">
    <h1 class="text-center">Click Count by Category and Session</h1>
    <div id="chart" style="width: 100%; height: 600px;"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        axios.get('/api/clicksessiontop10/data')
            .then(function (response) {
                const data = response.data;

                // Process data
                const chartData = {};
                data.forEach(item => {
                    if (!chartData[item.categoryId]) {
                        chartData[item.categoryId] = [];
                    }
                    chartData[item.categoryId].push({ sessionId: item.sessionId, clickCount: item.clickCount });
                });

                const categories = Object.keys(chartData);
                const seriesData = categories.map(category => {
                    const sessions = chartData[category];
                    return {
                        name: category,
                        type: 'bar',
                        stack: 'total',
                        data: sessions.map(session => session.clickCount)
                    };
                });

                const option = {
                    title: {
                        text: 'Click Count by Category and Session',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            let tooltip = `Category ID: ${params[0].axisValue}<br/>`;
                            params.forEach(param => {
                                const session = chartData[param.seriesName].find(session => session.clickCount === param.value);
                                tooltip += `Session ID: ${session.sessionId}<br/>Click Count: ${param.value}<br/>`;
                            });
                            return tooltip;
                        }
                    },
                    legend: {
                        data: categories,
                        top: 'bottom'
                    },
                    xAxis: {
                        type: 'category',
                        data: categories,
                        axisLabel: {
                            interval: 0,
                            rotate: 30
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: seriesData
                };

                const chart = echarts.init(document.getElementById('chart'));
                chart.setOption(option);
            })
            .catch(function (error) {
                console.error('Error fetching data:', error);
            });
    });
</script>
</body>
</html>
